<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-carousel height="350px">
      <el-carousel-item v-for="b in bannerArr">
        <img :src="b.imgUrl" width="100%"></el-carousel-item>
    </el-carousel>
    <!--  烘焙食谱导航条开始    -->
    <el-row style="background-color: white">
      <el-col :span="3">
        <p style="font-size: 28px;margin: 15px">烘焙食谱</p>
      </el-col>
      <el-col :span="21">
<!--       @select选择事件,当用户选择了导航菜单中的某一项时会调用对应的方法 -->
        <el-menu mode="horizontal" @select="handleRecipe" default-active="0" active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item v-for="c in recipeCategoryArr"
                        :index="c.id.toString()">{{c.name}}</el-menu-item>

        </el-menu>
      </el-col>
    </el-row>
    <!--  烘焙食谱导航条结束    -->
    <!--  食谱列表开始  -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in recipeArr" :key="item.id" style="margin: 10px 0">
        <el-card>
          <a href="javascript:void(0)" @click="detail(item.id)">
            <img :src="BASE_URL+item.imgUrl" width="100%" height="145">
            <p style="height: 40px">{{ item.title }}</p>
          </a>
          <el-row>
            <el-col :span="4">
              <el-avatar :src="BASE_URL+item.userImgUrl" size="small"></el-avatar>
            </el-col>
            <el-col :span="10">{{ item.nickname }}</el-col>
            <el-col :span="10">
              <span style="float: right">{{ item.categoryName }}</span>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!--  食谱列表结束  -->
    <div style="text-align: center">
      <el-button @click="loadMore(1)">点击加载更多</el-button>
    </div>
    <!--  烘焙视频导航条开始    -->
    <el-row style="background-color: white">
      <el-col :span="3">
        <p style="font-size: 28px;margin: 15px">烘焙视频</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal" @select="handleVideo" default-active="0" active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item v-for="c in videoCategoryArr"
                        :index="c.id.toString()">{{c.name}}</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <!--  烘焙视频导航条结束    -->
    <!--  视频列表开始  -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in videoArr" :key="item.id" style="margin: 10px 0">
        <el-card>
          <a href="javascript:void(0)" @click="detail(item.id)">
            <img :src="BASE_URL+item.imgUrl" width="100%" height="145">
            <p style="height: 40px">{{ item.title }}</p>
          </a>
          <el-row>
            <el-col :span="4">
              <el-avatar :src="BASE_URL+item.userImgUrl" size="small"></el-avatar>
            </el-col>
            <el-col :span="10">{{ item.nickname }}</el-col>
            <el-col :span="10">
              <span style="float: right">{{ item.categoryName }}</span>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!--  视频列表结束  -->
    <div style="text-align: center">
      <el-button @click="loadMore(5)">点击加载更多</el-button>
    </div>
    <!--  行业资讯导航条开始    -->
    <el-row style="background-color: white">
      <el-col :span="3">
        <p style="font-size: 28px;margin: 15px">行业资讯</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal" @select="handleInfo" default-active="0" active-text-color="orange">
          <el-menu-item index="0">全部</el-menu-item>
          <el-menu-item v-for="c in infoCategoryArr"
                        :index="c.id.toString()">{{c.name}}</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <!--  行业资讯导航条结束    -->
    <!--  资讯列表开始  -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in infoArr" :key="item.id" style="margin: 10px 0">
        <el-card>
          <a href="javascript:void(0)" @click="detail(item.id)">
            <img :src="BASE_URL+item.imgUrl" width="100%" height="145">
            <p style="height: 40px">{{ item.title }}</p>
          </a>
          <el-row>
            <el-col :span="4">
              <el-avatar :src="BASE_URL+item.userImgUrl" size="small"></el-avatar>
            </el-col>
            <el-col :span="10">{{ item.nickname }}</el-col>
            <el-col :span="10">
              <span style="float: right">{{ item.categoryName }}</span>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!--  资讯列表结束  -->
    <div style="text-align: center">
      <el-button @click="loadMore(8)">点击加载更多</el-button>
    </div>

  </div>
</template>

<script>
export default {
  name: "IndexView",
  data() {
    return {
      bannerArr:[],
      recipeArr: [],
      videoArr:[],
      infoArr:[],
      recipeCategoryArr:[],
      videoCategoryArr:[],
      infoCategoryArr:[]
    }
  },
  methods: {
    loadMore(type){
      this.$router.push('/list?type='+type);
    },
    detail(id){
      //跳转到详情页面
      this.$router.push('/detail?id='+id);
    },
    handleRecipe(key,keyPath){
      // key=index index的值是二级分类的id
      this.loadContents(1,key);
    },
    handleVideo(key,keyPath){
      this.loadContents(5,key);
    },
    handleInfo(key,keyPath){
      this.loadContents(8,key);
    },
    loadSubCategories() {
      this.axios.get(this.BASE_URL+'/v1/categories/1/sub').then((response)=>{
        if (response.data.code==1){
          this.recipeCategoryArr = response.data.data;
        }
      })
      this.axios.get(this.BASE_URL+'/v1/categories/5/sub').then((response)=>{
        if (response.data.code==1){
          this.videoCategoryArr = response.data.data;
        }
      })
      this.axios.get(this.BASE_URL+'/v1/categories/8/sub').then((response)=>{
        if (response.data.code==1){
          this.infoCategoryArr = response.data.data;
        }
      })
    },
    loadContents(type,categoryId){
      this.axios.get(this.BASE_URL+'/v1/contents/'
          +type+"/"+categoryId+"/index").then((response)=>{
            if (response.data.code==1){
              switch (type){
                case 1://食谱
                  this.recipeArr = response.data.data;
                      break;
                case 5://视频
                  this.videoArr = response.data.data;
                  break;
                case 8://资讯
                  this.infoArr = response.data.data;
                  break;

              }
            }
      })
    }
  },
  mounted() {
    this.loadSubCategories();
    //请求三个分类下的内容  分类id为0代表全部
    this.loadContents(1,0);
    this.loadContents(5,0);
    this.loadContents(8,0);

    this.axios.get('http://localhost:8080/v1/banners/')
        .then((response)=>{
      if (response.data.code==1){
        this.bannerArr = response.data.data;
      }
    })
  }
}
</script>

<style scoped>

</style>